<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="title" content="惊蛰自用小图床">
    <meta name="keywords" content="惊蛰,图床，免费图床,免费图片托管服务,码云">
    <meta name="description" content="使用码云的api达到免费图床的作用-免费图片托管服务">
    <title>我的图片</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 layui.css -->
    <link href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script>
    <script src="/js/lightGallery.js"></script>
    <script src="/js/index.js"></script>
    <link type="text/css" rel="stylesheet" href="https://www.jq22.com/demo/lightGallery/lightGallery.css" />
    <style>
        .card-header-img {
            width: 100%;
            height: 270px;
            object-fit: contain;
        }

        .layui-card-header {
            height: 100%;
        }

        .layui-card-body {
            white-space: nowrap;
            display: flex;
            justify-content: space-between;
        }

        ul {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-end;
        }

        ul>li:first-child {
            position: absolute !important;
            left: 25px;
        }

        .more-icon {
            line-height: 30px;
            right: 20px;
        }

        svg {
            width: 16px;
            height: 16px;
        }

        .card-body-path {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 80%;
        }
    </style>
</head>

<body>

    <div>
        <ul class="layui-nav">
            <li class="layui-nav-item"><a href="/">免费图床</a></li>
            <li class="layui-nav-item"><a href="https://gitee.com/jingzhewl/code-cloud-chart-bed-code">本站源码</a></li>
            <li class="layui-nav-item"><a href="/">主页</a></li>
            <li class="layui-nav-item layui-this"><a href="javascript:;">图库</a></li>
            <li class="user-center layui-nav-item" style="display: none;">
                <a href="javascript:;">个人中心</a>
                <dl class="layui-nav-child">
                    <dd><a href="/user">个人信息</a></dd>
                    <dd><a href="">修改密码</a></dd>
                    <dd><a href="javascript:;" onclick="loginout()">退出</a></dd>
                </dl>
            </li>
            <li class="user-center layui-nav-item" style="display: none;">
                <a href="/login">登录</a>
            </li>
        </ul>
    </div>
    <div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>我的图片</legend>
        </fieldset>

        <div class="layui-bg-gray" style="padding: 30px;">
            <div id="lightGallery" class="layui-row layui-col-space15 images-list">
                <!-- <div class="layui-col-md3" data-src="https://gitee.com/jingzhewl/blogimage/raw/">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <img class="card-header-img" src="https://gitee.com/jingzhewl/blogimage/raw/"></img>
                        </div>
                        <div class="layui-card-body">
                            <span>wwww</span>
                            <span class="more-icon">
                                <svg t="1630048811636" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="3734" width="200" height="200">
                                    <path
                                        d="M799.2 874.4c0 34.4-28.001 62.4-62.4 62.4H287.2c-34.4 0-62.4-28-62.4-62.4V212h574.4v662.4zM349.6 100c0-7.2 5.6-12.8 12.8-12.8h300c7.2 0 12.8 5.6 12.8 12.8v37.6H349.6V100z m636.8 37.6H749.6V100c0-48.001-39.2-87.2-87.2-87.2h-300c-48 0-87.2 39.199-87.2 87.2v37.6H37.6C16.8 137.6 0 154.4 0 175.2s16.8 37.6 37.6 37.6h112v661.6c0 76 61.6 137.6 137.6 137.6h449.6c76 0 137.6-61.6 137.6-137.6V212h112c20.8 0 37.6-16.8 37.6-37.6s-16.8-36.8-37.6-36.8zM512 824c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0 20.8 16.8 37.6 37.6 37.6m-175.2 0c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0.8 20.8 17.6 37.6 37.6 37.6m350.4 0c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0 20.8 16.8 37.6 37.6 37.6"
                                        fill="#8A8A8A" p-id="3735"></path>
                                </svg>
                            </span>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>


    <script>
        function isAssetTypeAnImage(ext) {
            return [
                'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'
            ].
                indexOf(ext.toLowerCase()) !== -1;
        }

        function init() {
            $.ajax({
                url: "getFileTree",
                type: 'POST',
                data: {
                    "token": window.sessionStorage.getItem('token'),
                    "branch": window.sessionStorage.getItem('branch'),
                    "owner": window.sessionStorage.getItem('owner'),
                    "repo": window.sessionStorage.getItem('repo')
                },
                success: function (result) {
                    let jsonObj = "";
                    try {
                        jsonObj = JSON.parse(result);
                    }
                    catch (err) {
                        layer.alert('同学，您的图床错误了！（您还没登录或者配置错误啦）')
                    }
                    $(".images-list").html("");
                    jsonObj.tree.forEach(element => {
                        if (isAssetTypeAnImage(element.path.substr((element.path.lastIndexOf(".")) +
                            1))) {
                            $(".images-list").append(
                                '<div class="layui-col-md3">' +
                                '<div class="layui-card">' +
                                '<div class="layui-card-header">' +
                                '<img class="card-header-img" data-src="https://gitee.com/' + window.sessionStorage.getItem('owner') + '/' + window.sessionStorage.getItem('repo') + '/raw/' +
                                jsonObj.sha + '/' + element.path +
                                '" src="https://gitee.com/' + window.sessionStorage.getItem('owner') + '/' + window.sessionStorage.getItem('repo') + '/raw/' +
                                jsonObj.sha + '/' + element.path + '"></img>' +
                                '</div>' +
                                '<div class="layui-card-body"><span class="card-body-path" title="' +
                                element.path + '">' +
                                element.path + '</span>' +
                                '<span class="more-icon" path="' + element.path + '" sha="' +
                                element.sha + '" master="' + jsonObj.sha + '">' +
                                '<svg t="1630048811636" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3734" width="200" height="200"><path d="M799.2 874.4c0 34.4-28.001 62.4-62.4 62.4H287.2c-34.4 0-62.4-28-62.4-62.4V212h574.4v662.4zM349.6 100c0-7.2 5.6-12.8 12.8-12.8h300c7.2 0 12.8 5.6 12.8 12.8v37.6H349.6V100z m636.8 37.6H749.6V100c0-48.001-39.2-87.2-87.2-87.2h-300c-48 0-87.2 39.199-87.2 87.2v37.6H37.6C16.8 137.6 0 154.4 0 175.2s16.8 37.6 37.6 37.6h112v661.6c0 76 61.6 137.6 137.6 137.6h449.6c76 0 137.6-61.6 137.6-137.6V212h112c20.8 0 37.6-16.8 37.6-37.6s-16.8-36.8-37.6-36.8zM512 824c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0 20.8 16.8 37.6 37.6 37.6m-175.2 0c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0.8 20.8 17.6 37.6 37.6 37.6m350.4 0c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0 20.8 16.8 37.6 37.6 37.6" fill="#8A8A8A" p-id="3735"></path></svg>' +
                                '</span>' +
                                '</div>' +
                                '</div>' +
                                '</div>');
                        }
                    });
                    $("#lightGallery").lightGallery({

                    });
                    $(".more-icon").unbind("click");
                    $(".more-icon").on('click', function () {
                        let path = $(this).attr('path');
                        let sha = $(this).attr('sha');
                        let master = $(this).attr('master');
                        del(path, sha, master);
                    })
                }
            });
        }


        function del(path, sha, master) {

            let index = layer.confirm('您确定要删除该图片吗？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax({
                    url: "delFile",
                    type: 'POST',
                    data: {
                        "path": encodeURI(path),
                        "sha": sha,
                        "master": master,
                        "token": window.sessionStorage.getItem('token'),
                        "branch": window.sessionStorage.getItem('branch'),
                        "owner": window.sessionStorage.getItem('owner'),
                        "repo": window.sessionStorage.getItem('repo')
                    },
                    success: function (result) {
                        let index = layer.alert("删除成功", function () {
                            layer.close(index);
                            init();
                        })
                    }
                });
            }, function () {
                layer.close(index)
            });
        }
    </script>
    <script type="text/javascript">
        var layer = null;
        init();
        layui.use(['form', 'layedit', 'laydate'], function () {
            layer = layui.layer;
        })
    </script>
</body>

</html>